<template>
  <div
    class="common-navigateBar"
    :class="[borderBottom && 'border-bottom']"
    :style="{ height: `${barHeight}px`, backgroundColor: background }"
  >
    <div
      class="common-navigateBar__inner"
      :style="{ height: `${barHeight}px` }"
    >
      <div
        class="common-navigateBar__inner-bar"
        :style="{
          top: `${statusHeight}px`,
          height: `${customNavHeight}px`,
          paddingLeft: `${navbarBtn.right}px`,
          paddingRight: rightEnabled
            ? `${navbarBtn.right + navbarBtn.width + navGap}px`
            : `${navbarBtn.right}px`,
        }"
      >
        <slot name="left">
          <div v-show="hasPages" class="back-btn" @tap="onBack">
            <image src="@/assets/icon/back.png" />
          </div>
        </slot>
        <div
          :style="{ justifyContent: centerContent }"
          class="common-navigateBar__inner-bar_center"
        >
          <slot
            name="center"
            :right="
              Taro.pxTransform(navbarBtn.right + navbarBtn.width + navGap)
            "
          >
            {{ title }}
          </slot>
        </div>
        <div v-show="hasPages" class="back-btn"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Taro, { useReady } from "@tarojs/taro";
import { ref, computed } from "vue";

defineOptions({
  name: "common-navigateBar",
});

export type CommonNavigateBarProps = {
  background?: string;
  title?: string;
  borderBottom?: boolean;
  leftEnabled?: boolean;
  rightEnabled?: boolean;
  centerContent?: "flex-start" | "center" | "flex-end";
};

withDefaults(defineProps<Partial<CommonNavigateBarProps>>(), {
  leftEnabled: true,
  rightEnabled: false,
  centerContent: "center",
});

const navGap = 5;
// 状态栏高度
const statusHeight = ref(0);
// 顶部导航栏高度
const barHeight = ref(0);

const customNavHeight = ref(0);

// 胶囊位置信息
const navbarBtn = ref({ height: 0, width: 0, top: 0, bottom: 0, right: 0 });

useReady(() => {
  computedBarInfo();
});

const hasPages = computed(() => {
  return Taro.getCurrentPages().length > 1;
});

const computedBarInfo = () => {
  const systemInfo: Taro.getSystemInfoSync.Result = Taro.getSystemInfoSync();
  const menuButtonInfo: Taro.getMenuButtonBoundingClientRect.Rect =
    Taro.getMenuButtonBoundingClientRect();

  const { height, width, top, bottom, right } = menuButtonInfo;

  const { statusBarHeight = 0, windowWidth } = systemInfo;

  // 胶囊实际位置，坐标信息不是左上角原点
  const menuButtonPosition = {
    height,
    width,
    top: top - statusBarHeight,
    bottom: bottom - height - statusBarHeight,
    right: windowWidth - right,
  };

  navbarBtn.value = menuButtonPosition;

  customNavHeight.value =
    menuButtonPosition.height +
    menuButtonPosition.top +
    menuButtonPosition.bottom;

  barHeight.value = bottom + menuButtonPosition.bottom;
  statusHeight.value = statusBarHeight;
};

const onBack = () => {
  // const pages = Taro.getCurrentPages();
  Taro.navigateBack({
    delta: 1,
  });
};
</script>

<style lang="less">
.common-navigateBar {
  width: 100%;
  &.border-bottom {
    border-bottom: 1px solid #e2e3e6;
  }
  &__inner {
    position: fixed;
    width: 100%;

    &-bar {
      position: relative;
      z-index: 9;
      display: flex;
      align-items: center;
      gap: 5px;
      &_center {
        width: 0;
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        font-weight: 500;
        font-size: 32px;
        color: #000000;
        line-height: 44px;
      }
      // background-color: red;
      .back-btn {
        padding: 0 10px;
        box-sizing: border-box;
        height: 100%;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        // background-color: red;
        image {
          width: 32px;
          height: 32px;
        }
      }
    }
  }
}
</style>
